<template>
  <nav class="list_article list list-x item-tb">
    <!-- 文章详情 -->
    <router-link class="article_warp" v-for="(o, i) in list" :key="i"
                 :to="'/article/details?' + vm.article_id + '=' + o[vm.article_id]">
      <div class="article">
        <div class="media">
          <div class="icon">
            <img :src="o[vm.img] ? $fullUrl(o[vm.img]) : '../../../public/img/default.png'"
                 v-default-img="'../../../public/img/default.png'"/>
          </div>
        </div>
        <div class="doc">
          <div class="title ellipsis_2" style="min-height: 2.8rem">
            {{ o[vm.title] }}
          </div>
          <div class="interact desc">
						<span class="praise">
							<b-icon icon="hand-thumbs-up"/>
							{{ o[vm.praise_len] }}
						</span>
            <span class="see">
							<b-icon icon="eye"/>
							{{ o[vm.hits] }}
						</span>
          </div>
          <div class="time">{{ $toTime(o[vm.create_time], "yyyy-MM-dd hh:mm:ss") }}</div>
        </div>
      </div>
    </router-link>
  </nav>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: function () {
        return [];
      },
    },
    vm: {
      type: Object,
      default: function () {
        return {
          img: "img",
          article_id: "article_id",
          title: "title",
          description: "description",
          title: "title",
          create_time: "create_time",
          content: "content",
          praise_len: "praise_len",
          hits: "hits",
        };
      },
    },
  },
  methods: {},
};
</script>

<style scoped>

.article_warp {
  display: flex;
  width: calc(25% - 1rem);
  margin: 0.5rem;
  flex-direction: column;
  justify-content: space-between;
  background-color: white;
  border-radius: 0.5rem;
}

.article_warp:hover {
  border: 0.2rem solid #909399;
  box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.15);
}

.article_warp:hover img {
  filter: blur(1px);
}

.article {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ellipsis_2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media (max-width: 992px) {

  .article_warp {
    width: calc(33% - 1rem);;
  }

}

@media (max-width: 768px) {

  .article_warp {
    width: calc(50% - 1rem);;
  }

}

</style>
